<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Exercise 1</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
    <!-- Change the order of elements so that box 3 appears first, then box2, then box 1 -->

  <style>
  .container{
    display:flex;
    flex-direction: column;
    border: 2px solid yellow;
  }
  .box1{
        width: 250px;
        height: 150px;
        border: 1px solid red;
        order: 3;
    }
    .box2{
      width: 250px;
      height: 150px;
      border: 1px solid red;
      order: 2;
  }

  .box3{
    width: 250px;
    height: 150px;
    border: 1px solid red;
    order: 1;
}

  </style>
  </head>

  <body>
    <!-- Change the order of elements so that box 3 appears first, then box2, then box 1 -->

  <div class = "container">
    <div class="box1"> Box 1</div>
    <div class="box2"> Box 2</div>
    <div class="box3"> Box 3</div>
  </div>
  </body>
</html>